

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=auto>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/images/common/favicon.png">
  <link rel="icon" href="/images/common/favicon.png">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  <meta name="author" content="Robbin">
  <meta name="keywords" content="">
  
    <meta name="description" content="今天我们来看点基础知识，看看 JavaScript 中的那些循环遍历方法：">
<meta property="og:type" content="article">
<meta property="og:title" content="24个 JavaScript 循环遍历方法，你都知道吗？">
<meta property="og:url" content="http://example.com/2022/03/08/article-8/index.html">
<meta property="og:site_name" content="前端阿开">
<meta property="og:description" content="今天我们来看点基础知识，看看 JavaScript 中的那些循环遍历方法：">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="http://example.com/images/common/JavaScript.jpeg">
<meta property="article:published_time" content="2022-03-08T06:28:55.000Z">
<meta property="article:modified_time" content="2022-03-08T06:28:55.000Z">
<meta property="article:author" content="web_akai">
<meta property="article:tag" content="#前端">
<meta property="article:tag" content="#JavaScript">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="http://example.com/images/common/JavaScript.jpeg">
  
  
  <title>24个 JavaScript 循环遍历方法，你都知道吗？ - 前端阿开</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4/github-markdown.min.css" />
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hint.css@2/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.css" />
  


<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_lbnruvf0jn.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"example.com","root":"/","version":"1.8.14","typing":{"enable":true,"typeSpeed":70,"cursorChar":"_","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true,"img_url_replace":["",""]},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"loading_img":"/img/loading.gif","onlypost":false,"offset_factor":2},"web_analytics":{"enable":true,"baidu":"b2ef8b4e438bfbfa9667837d1124fb6c","google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":"A6A3KekcB19LfYQfObiJlDAu-gzGzoHsz","app_key":"h5J0Jt6wCaR3HtH5I0brXmRk","server_url":null,"path":"window.location.pathname","ignore_local":true}},"search_path":"/local-search.xml"};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
<meta name="generator" content="Hexo 6.0.0"></head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand" href="/">
      <strong>前端阿开</strong>
    </a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                首页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                归档
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                分类
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                关于
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/links/">
                <i class="iconfont icon-link-fill"></i>
                友链
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/message/">
                <i class="iconfont icon-medium-fill"></i>
                留言板
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" target="_self" href="javascript:;" role="button"
                 data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="iconfont icon-books"></i>
                文档
              </a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                
                  
                  
                  
                  <a class="dropdown-item" target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/">
                    
                    主题博客
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/guide/">
                    
                    配置指南
                  </a>
                
                  
                  
                  
                  <a class="dropdown-item" target="_blank" rel="noopener" href="https://hexo.fluid-dev.com/docs/icon/">
                    
                    图标用法
                  </a>
                
              </div>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" target="_self" href="javascript:;" data-toggle="modal" data-target="#modalSearch" aria-label="Search">
              &nbsp;<i class="iconfont icon-search"></i>&nbsp;
            </a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" target="_self" href="javascript:;" aria-label="Color Toggle">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/images/common/default_index_img.jpg') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="24个 JavaScript 循环遍历方法，你都知道吗？">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      Robbin
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2022-03-08 14:28" pubdate>
        2022-03-08, 14:28
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      10k 字
    </span>
  

  
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      84 分钟
    </span>
  

  
  
    
      <!-- LeanCloud 统计文章PV -->
      <span id="leancloud-page-views-container" class="post-meta" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="leancloud-page-views"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">24个 JavaScript 循环遍历方法，你都知道吗？</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2 年前
                
              </p>
            
            <div class="markdown-body">
              <p class="note note-success">今天我们来看点基础知识，看看 JavaScript 中的那些循环遍历方法：<p>

<span id="more"></span>

<p><img src="/./images/733F5E1A-DEA6-481d-8F45-9BC79A7A8D12.png" srcset="/img/loading.gif" lazyload alt="js遍历方法"></p>
<h2 id="一、数组遍历方法"><a href="#一、数组遍历方法" class="headerlink" title="一、数组遍历方法"></a>一、数组遍历方法</h2><h3 id="1-forEach"><a href="#1-forEach" class="headerlink" title="1. forEach()"></a>1. forEach()</h3><p>forEach 方法用于调用数组的每个元素，并将元素传递给回调函数。数组中的每个值都会调用回调函数。其语法如下：<br><code>array.forEach(function(currentValue, index, arr), thisValue)</code></p>
<p>该方法的第一个参数为回调函数，是必传的，它有三个参数：</p>
<ul>
<li>currentValue：必需。当前元素</li>
<li>index：可选。当前元素的索引值。</li>
<li>arr：可选。当前元素所属的数组对象</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">item, index, arr</span>) =&gt;</span> &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(index+<span class="hljs-string">&quot;:&quot;</span>+item)<br>&#125;)<br></code></pre></div></td></tr></table></figure>

<p>该方法还可以有第二个参数，用来绑定回调函数内部 this 变量（前提是回调函数不能是箭头函数，因为箭头函数没有 this）：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>]<br><span class="hljs-keyword">let</span> arr1 = [<span class="hljs-number">9</span>,<span class="hljs-number">8</span>,<span class="hljs-number">7</span>,<span class="hljs-number">6</span>,<span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">forEach</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">item, index, arr</span>)&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-variable language_">this</span>[index])  <span class="hljs-comment">//  9 8 7 6 5</span><br>&#125;, arr1)<br></code></pre></div></td></tr></table></figure>

<h4 id="注意："><a href="#注意：" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>forEach 方法不会改变原数组，也没有返回值；</li>
<li>forEach 无法使用 break，continue 跳出循环，使用 return 时，效果和在 for 循环中使用 continue 一致；</li>
<li>forEach 方法无法遍历对象，仅适用于数组的遍历。</li>
</ul>
<h3 id="2-map"><a href="#2-map" class="headerlink" title="2. map()"></a>2. map()</h3><p><code>map()</code> 方法会返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。该方法按照原始数组元素顺序依次处理元素。其语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">array.<span class="hljs-title function_">map</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">currentValue,index,arr</span>), thisValue)<br></code></pre></div></td></tr></table></figure>

<p>该方法的第一个参数为回调函数，是必传的，它有三个参数：</p>
<ul>
<li>currentValue：必须。当前元素的值；</li>
<li>index：可选。当前元素的索引值；</li>
<li>arr：可选。当前元素属于的数组对象。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>];<br><br>arr.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> &#123;<br>    <span class="hljs-keyword">return</span> item + <span class="hljs-number">1</span>;<br>&#125;)<br><br><span class="hljs-comment">// 输出结果： [2, 3, 4]</span><br></code></pre></div></td></tr></table></figure>

<p>该方法的第二个参数用来绑定参数函数内部的 this 变量，是可选的：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-string">&#x27;c&#x27;</span>];<br><br>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>].<span class="hljs-title function_">map</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params">e</span>) &#123;<br>    <span class="hljs-keyword">return</span> <span class="hljs-variable language_">this</span>[e];<br>&#125;, arr)<br><br><span class="hljs-comment">// 输出结果： [&#x27;b&#x27;, &#x27;c&#x27;]</span><br></code></pre></div></td></tr></table></figure>

<p>该方法还可以进行链式调用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>];<br><br>arr.<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item + <span class="hljs-number">1</span>).<span class="hljs-title function_">map</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item + <span class="hljs-number">1</span>)<br><br><span class="hljs-comment">// 输出结果： [3, 4, 5]</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-1"><a href="#注意：-1" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>map 方法不会对空数组进行检测；</li>
<li>map 方法遍历数组时会返回一个新数组，不会改变原始数组；</li>
<li>map 方法有返回值，可以 return 出来，map 的回调函数中支持 return 返回值；<br>*map 方法无法遍历对象，仅适用于数组的遍历。</li>
</ul>
<h3 id="3-for-of"><a href="#3-for-of" class="headerlink" title="3. for of"></a>3. for of</h3><p>for…of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 <code>for...of</code> 循环，以替代 <code>for...in</code> 和 <code>forEach()</code> ，并支持新的迭代协议。其语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">for</span> (variable <span class="hljs-keyword">of</span> iterable) &#123;<br>    statement<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>该方法有两个参数：</p>
<ul>
<li><code>variable</code>：每个迭代的属性值被分配给该变量。</li>
<li><code>iterable</code>：一个具有可枚举属性并且可以迭代的对象。</li>
</ul>
<p>该方法可以获取数组的每一项：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<br>    &#123;<span class="hljs-attr">id</span>:<span class="hljs-number">1</span>, <span class="hljs-attr">value</span>:<span class="hljs-string">&#x27;hello&#x27;</span>&#125;,<br>    &#123;<span class="hljs-attr">id</span>:<span class="hljs-number">2</span>, <span class="hljs-attr">value</span>:<span class="hljs-string">&#x27;world&#x27;</span>&#125;,<br>    &#123;<span class="hljs-attr">id</span>:<span class="hljs-number">3</span>, <span class="hljs-attr">value</span>:<span class="hljs-string">&#x27;JavaScript&#x27;</span>&#125;<br>]<br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> arr) &#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(item);<br>&#125;<br><span class="hljs-comment">// 输出结果：&#123;id:1, value:&#x27;hello&#x27;&#125;  &#123;id:2, value:&#x27;world&#x27;&#125; &#123;id:3, value:&#x27;JavaScript&#x27;&#125;</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-2"><a href="#注意：-2" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>for of 方法只会遍历当前对象的属性，不会遍历其原型链上的属性；</li>
<li>for of 方法适用遍历 数组&#x2F; 类数组&#x2F;字符串&#x2F;map&#x2F;set 等拥有迭代器对象的集合；</li>
<li>for of 方法不支持遍历普通对象，因为其没有迭代器对象。如果想要遍历一个对象的属性，可以用 for in 方法；<br>可以使用<code>break</code>、<code>continue</code>、<code>return</code>来中断循环遍历；</li>
</ul>
<h3 id="4-filter"><a href="#4-filter" class="headerlink" title="4. filter()"></a>4. filter()</h3><p><code>filter()</code>方法用于过滤数组，满足条件的元素会被返回。它的参数是一个回调函数，所有数组元素依次执行该函数，返回结果为 <code>true</code> 的元素会被返回，如果没有符合条件的元素，则返回空数组。其语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">array.<span class="hljs-title function_">filter</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">currentValue,index,arr</span>), thisValue)<br></code></pre></div></td></tr></table></figure>

<p>该方法的第一个参数为回调函数，是必传的，它有三个参数：</p>
<ul>
<li><code>currentValue</code>：必须。当前元素的值；</li>
<li><code>index</code>：可选。当前元素的索引值；</li>
<li><code>arr</code>：可选。当前元素属于的数组对象。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">filter</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item &gt; <span class="hljs-number">2</span>)<br><br><span class="hljs-comment">// 输出结果：[3, 4, 5]</span><br></code></pre></div></td></tr></table></figure>

<p>同样，它也有第二个参数，用来绑定参数函数内部的 this 变量。<br>可以使用<code>filter()</code>方法来移除数组中的<code>undefined</code>、<code>null</code>、<code>NAN</code>等值：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-literal">undefined</span>, <span class="hljs-number">2</span>, <span class="hljs-literal">null</span>, <span class="hljs-number">3</span>, <span class="hljs-literal">false</span>, <span class="hljs-string">&#x27;&#x27;</span>, <span class="hljs-number">4</span>, <span class="hljs-number">0</span>]<br>arr.<span class="hljs-title function_">filter</span>(<span class="hljs-title class_">Boolean</span>)<br><br><span class="hljs-comment">// 输出结果：[1, 2, 3, 4]</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-3"><a href="#注意：-3" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>filter 方法会返回一个新的数组，不会改变原数组；</li>
<li>filter 方法不会对空数组进行检测；</li>
<li>filter 方法仅适用于检测数组。</li>
</ul>
<h3 id="5-some-、every"><a href="#5-some-、every" class="headerlink" title="5. some()、every()"></a>5. some()、every()</h3><p><code>some()</code> 方法会对数组中的每一项进行遍历，只要有一个元素符合条件，就返回 true，且剩余的元素不会再进行检测，否则就返回 false。<br>​<br><code>every()</code> 方法会对数组中的每一项进行遍历，只有所有元素都符合条件时，才返回 true，如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。其语法如下：<br>​<br>两者的语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">array.<span class="hljs-title function_">some</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">currentValue,index,arr</span>),thisValue)<br>array.<span class="hljs-title function_">every</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">currentValue,index,arr</span>), thisValue)<br></code></pre></div></td></tr></table></figure>

<p>两个方法的第一个参数为回调函数，是必传的，它有三个参数：</p>
<ul>
<li><code>currentValue</code>：必须。当前元素的值；</li>
<li><code>index</code>：可选。当前元素的索引值；</li>
<li><code>arr</code>：可选。当前元素属于的数组对象。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">some</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item &gt; <span class="hljs-number">4</span>)<br><br><span class="hljs-comment">// 输出结果： true</span><br><br><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">every</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item &gt; <span class="hljs-number">0</span>)<br><br><span class="hljs-comment">// 输出结果： true</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-4"><a href="#注意：-4" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>两个方法都不会改变原数组，会返回一个布尔值；</li>
<li>两个方法都不会对空数组进行检测；</li>
<li>两个方法都仅适用于检测数组。</li>
</ul>
<h3 id="6-reduce-、reduceRight"><a href="#6-reduce-、reduceRight" class="headerlink" title="6. reduce()、reduceRight()"></a>6. <code>reduce()</code>、<code>reduceRight()</code></h3><p><code>reduce()</code> 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。</p>
<p><code>reduce()</code> 可以作为一个高阶函数，用于函数的 compose。其语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">array.<span class="hljs-title function_">reduce</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">total, currentValue, currentIndex, arr</span>), initialValue)<br></code></pre></div></td></tr></table></figure>

<p><code>reduce</code> 方法会为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，回调函数接受四个参数：</p>
<ul>
<li>total：上一次调用回调返回的值，或者是提供的初始值（initialValue）；</li>
<li>currentValue：当前被处理的元素；</li>
<li>currentIndex：当前元素的索引；</li>
<li>arr：当前元素所属的数组对象。</li>
</ul>
<p>该方法的第二个参数是 <code>initialValue</code>，表示传递给函数的初始值 （作为第一次调用 callback 的第一个参数）：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>]<br><span class="hljs-keyword">let</span> sum = arr.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">prev, cur, index, arr</span>) =&gt;</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(prev, cur, index);<br>    <span class="hljs-keyword">return</span> prev + cur;<br>&#125;)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr, sum);<br></code></pre></div></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">输出结果：<br><span class="hljs-number">1</span> <span class="hljs-number">2</span> <span class="hljs-number">1</span><br><span class="hljs-number">3</span> <span class="hljs-number">3</span> <span class="hljs-number">2</span><br><span class="hljs-number">6</span> <span class="hljs-number">4</span> <span class="hljs-number">3</span><br>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>] <span class="hljs-number">10</span><br></code></pre></div></td></tr></table></figure>

<p>再来加一个初始值试试：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>]<br><span class="hljs-keyword">let</span> sum = arr.<span class="hljs-title function_">reduce</span>(<span class="hljs-function">(<span class="hljs-params">prev, cur, index, arr</span>) =&gt;</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(prev, cur, index);<br>    <span class="hljs-keyword">return</span> prev + cur;<br>&#125;, <span class="hljs-number">5</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr, sum);<br></code></pre></div></td></tr></table></figure>

<p>输出结果：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-number">5</span> <span class="hljs-number">1</span> <span class="hljs-number">0</span><br><span class="hljs-number">6</span> <span class="hljs-number">2</span> <span class="hljs-number">1</span><br><span class="hljs-number">8</span> <span class="hljs-number">3</span> <span class="hljs-number">2</span><br><span class="hljs-number">11</span> <span class="hljs-number">4</span> <span class="hljs-number">3</span><br>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>] <span class="hljs-number">15</span><br></code></pre></div></td></tr></table></figure>

<p>由此可以得出结论：<span style='color:#5cb85c'>[ 如果没有提供初始值 initialValue，reduce 会从索引 1 的地方开始执行 callback 方法，跳过第一个索引。如果提供了初始值 initialValue，从索引 0 开始执行 ]</span><br>​<br><code>reduceRight()</code> 方法和的<code>reduce()</code>用法几乎一致，只是该方法是对数组进行倒序遍历的，而<code>reduce()</code>方法是正序遍历的。</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>]<br><span class="hljs-keyword">let</span> sum = arr.<span class="hljs-title function_">reduceRight</span>(<span class="hljs-function">(<span class="hljs-params">prev, cur, index, arr</span>) =&gt;</span> &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(prev, cur, index);<br>    <span class="hljs-keyword">return</span> prev + cur;<br>&#125;, <span class="hljs-number">5</span>)<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr, sum);<br></code></pre></div></td></tr></table></figure>

<p>输出结果：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-number">5</span> <span class="hljs-number">4</span> <span class="hljs-number">3</span><br><span class="hljs-number">9</span> <span class="hljs-number">3</span> <span class="hljs-number">2</span><br><span class="hljs-number">12</span> <span class="hljs-number">2</span> <span class="hljs-number">1</span><br><span class="hljs-number">14</span> <span class="hljs-number">1</span> <span class="hljs-number">0</span><br>[<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>] <span class="hljs-number">15</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-5"><a href="#注意：-5" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>两个方法都不会改变原数组；</li>
<li>两个方法如果添加初始值，就会改变原数组，会将这个初始值放在数组的最后一位；</li>
<li>两个方法对于空数组是不会执行回调函数的。</li>
</ul>
<h3 id="7-find-、findIndex"><a href="#7-find-、findIndex" class="headerlink" title="7. find()、findIndex()"></a>7. find()、findIndex()</h3><p><code>find()</code> 方法返回通过函数内判断的数组的第一个元素的值。当数组中的元素在测试条件时返回 <code>true</code> 时， <code>find()</code> 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 <code>undefined</code>。<br>​<br><code>findIndex()</code> 方法返回传入一个测试函数符合条件的数组第一个元素位置（索引）。当数组中的元素在函数条件时返回 <code>true</code> 时， <code>findIndex()</code> 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。<br>​<br>两个方法的语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">array.<span class="hljs-title function_">find</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">currentValue, index, arr</span>),thisValue)<br>array.<span class="hljs-title function_">findIndex</span>(<span class="hljs-keyword">function</span>(<span class="hljs-params">currentValue, index, arr</span>), thisValue)<br></code></pre></div></td></tr></table></figure>

<p>两个方法的第一个参数为回调函数，是必传的，它有三个参数：</p>
<ul>
<li><code>currentValue</code>：必需。当前元素；</li>
<li><code>index</code>：可选。当前元素的索引；</li>
<li><code>arr</code>：可选。当前元素所属的数组对象。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">find</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item &gt; <span class="hljs-number">2</span>)<br><br><span class="hljs-comment">// 输出结果： 3</span><br><br><span class="hljs-keyword">let</span> arr = [<span class="hljs-number">1</span>, <span class="hljs-number">2</span>, <span class="hljs-number">3</span>, <span class="hljs-number">4</span>, <span class="hljs-number">5</span>]<br>arr.<span class="hljs-title function_">findIndex</span>(<span class="hljs-function"><span class="hljs-params">item</span> =&gt;</span> item &gt; <span class="hljs-number">2</span>)<br><br><span class="hljs-comment">// 输出结果： 2</span><br></code></pre></div></td></tr></table></figure>

<p><code>find()</code>和<code>findIndex()</code>两个方法几乎一样，只是返回结果不同：</p>
<p><code>find()</code>：返回的是第一个符合条件的值；<br><code>findIndex</code>：返回的是第一个返回条件的值的索引值。</p>
<h4 id="注意：-6"><a href="#注意：-6" class="headerlink" title="注意："></a>注意：</h4><ul>
<li>两个方法对于空数组，函数是不会执行的；</li>
<li>两个方法否不会改变原数组。</li>
</ul>
<h3 id="8-keys-、values-、entries"><a href="#8-keys-、values-、entries" class="headerlink" title="8. keys()、values()、entries()"></a>8. keys()、values()、entries()</h3><p>三个方法都返回一个数组的迭代对象，对象的内容不太相同：</p>
<ul>
<li><code>keys()</code> 返回数组的索引值；</li>
<li><code>values()</code> 返回数组的元素；</li>
<li><code>entries()</code> 返回数组的键值对。</li>
</ul>
<p>三个方法的语法如下：</p>
<ul>
<li><code>array.keys()</code></li>
<li><code>array.values()</code></li>
<li><code>array.entries()</code></li>
</ul>
<figure class="highlight coffeescript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs coffeescript">这三个方法都没有参数：<br><br>```<span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">let</span> arr = [<span class="hljs-string">&quot;Banana&quot;</span>, <span class="hljs-string">&quot;Orange&quot;</span>, <span class="hljs-string">&quot;Apple&quot;</span>, <span class="hljs-string">&quot;Mango&quot;</span>];</span><br><span class="language-javascript"><span class="hljs-keyword">const</span> iterator1 = arr.<span class="hljs-title function_">keys</span>();</span><br><span class="language-javascript"><span class="hljs-keyword">const</span> iterator2 = arr.<span class="hljs-title function_">values</span>()</span><br><span class="language-javascript"><span class="hljs-keyword">const</span> iterator3 = arr.<span class="hljs-title function_">entries</span>()</span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> iterator1) &#123;</span><br><span class="language-javascript">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(item);</span><br><span class="language-javascript">&#125;</span><br><span class="language-javascript"><span class="hljs-comment">// 输出结果： 0 1 2 3</span></span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> iterator2) &#123;</span><br><span class="language-javascript">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(item);</span><br><span class="language-javascript">&#125;</span><br><span class="language-javascript"><span class="hljs-comment">// 输出结果： Banana Orange Apple Mango</span></span><br><span class="language-javascript"></span><br><span class="language-javascript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> iterator3) &#123;</span><br><span class="language-javascript">  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(item);</span><br><span class="language-javascript">&#125;</span><br><span class="language-javascript"><span class="hljs-comment">// 输出结果：[0, &#x27;Banana&#x27;] [1, &#x27;Orange&#x27;] [2, &#x27;Apple&#x27;] [3, &#x27;Mango&#x27;]</span></span><br></code></pre></div></td></tr></table></figure>

<h4 id="总结："><a href="#总结：" class="headerlink" title="总结："></a>总结：</h4><table>
<thead>
<tr>
<th align="left"><span style='color:#5cb85c'>方法</span></th>
<th align="center"><span style='color:#5cb85c'>是否改变原数组</span></th>
<th align="left"><span style='color:#5cb85c'>特点</span></th>
</tr>
</thead>
<tbody><tr>
<td align="left"><code>forEach()</code></td>
<td align="center">否</td>
<td align="left">没有返回值</td>
</tr>
<tr>
<td align="left"><code>map()</code></td>
<td align="center">否</td>
<td align="left">有返回值，可链式调用</td>
</tr>
<tr>
<td align="left"><code>for of</code></td>
<td align="center">否</td>
<td align="left"><code>for...of</code> 遍历具有 Iterator 迭代器的对象的属性，返回的是数组的元素、对象的属性值，不能遍历普通的 obj 对象，将异步循环变成同步循环</td>
</tr>
<tr>
<td align="left"><code>filter()</code></td>
<td align="center">否</td>
<td align="left">过滤数组，返回包含符合条件的元素的数组，可链式调用</td>
</tr>
<tr>
<td align="left"><code>every()</code>、<code>some()</code></td>
<td align="center">否</td>
<td align="left">some()只要有一个是 true，便返回 true；而 every()只要有一个是 false，便返回 false.</td>
</tr>
<tr>
<td align="left"><code>find()</code>、<code>findIndex()</code></td>
<td align="center">否</td>
<td align="left">find()返回的是第一个符合条件的值；findIndex()返回的是第一个返回条件的值的索引值</td>
</tr>
<tr>
<td align="left"><code>reduce()</code>、<code>reduceRight()</code></td>
<td align="center">否</td>
<td align="left">reduce()对数组正序操作；reduceRight()对数组逆序操作</td>
</tr>
<tr>
<td align="left"><code>keys()</code>、<code>values()</code>、<code>entries()</code></td>
<td align="center">否</td>
<td align="left">keys() 返回数组的索引值；values() 返回数组元素；entries() 返回数组的键值对。</td>
</tr>
</tbody></table>
<h2 id="二、对象遍历方法"><a href="#二、对象遍历方法" class="headerlink" title="二、对象遍历方法"></a>二、对象遍历方法</h2><h3 id="1-for-in"><a href="#1-for-in" class="headerlink" title="1. for in"></a>1. for in</h3><p><code>for…in</code> 主要用于循环对象属性。循环中的代码每执行一次，就会对对象的属性进行一次操作。其语法如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> <span class="hljs-keyword">in</span> object) &#123;<br> 执行的代码块<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>其中两个参数：</p>
<ul>
<li><code>var</code>：必须。指定的变量可以是数组元素，也可以是对象的属性。</li>
<li><code>object</code>：必须。指定迭代的的对象。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">var</span> obj = &#123;<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">b</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">c</span>: <span class="hljs-number">3</span>&#125;;<br><br><span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> obj) &#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;键名：&#x27;</span>, i);<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-string">&#x27;键值：&#x27;</span>, obj[i]);<br>&#125;<br></code></pre></div></td></tr></table></figure>

<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript">输出结果：<br>键名： a<br>键值： <span class="hljs-number">1</span><br>键名： b<br>键值： <span class="hljs-number">2</span><br>键名： c<br>键值： <span class="hljs-number">3</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-7"><a href="#注意：-7" class="headerlink" title="注意："></a>注意：</h4><p><code>for in</code> 方法不仅会遍历当前的对象所有的可枚举属性，还会遍历其原型链上的属性。</p>
<h3 id="2-Object-keys-、Object-values-、Object-entries"><a href="#2-Object-keys-、Object-values-、Object-entries" class="headerlink" title="2. Object.keys()、Object.values()、Object.entries()"></a>2. Object.keys()、Object.values()、Object.entries()</h3><p>这三个方法都用来遍历对象，它会返回一个由给定对象的自身可枚举属性（不含继承的和 <code>Symbol</code> 属性）组成的数组，数组元素的排列顺序和正常循环遍历该对象时返回的顺序一致，这个三个元素返回的值分别如下：</p>
<ul>
<li><code>Object.keys()</code>：返回包含对象键名的数组；</li>
<li><code>Object.values()</code>：返回包含对象键值的数组；</li>
<li><code>Object.entries()</code>：返回包含对象键名和键值的数组。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> obj = &#123;<br>  <span class="hljs-attr">id</span>: <span class="hljs-number">1</span>,<br>  <span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;hello&#x27;</span>,<br>  <span class="hljs-attr">age</span>: <span class="hljs-number">18</span><br>&#125;;<br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(obj));   <span class="hljs-comment">// 输出结果: [&#x27;id&#x27;, &#x27;name&#x27;, &#x27;age&#x27;]</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">values</span>(obj)); <span class="hljs-comment">// 输出结果: [1, &#x27;hello&#x27;, 18]</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">entries</span>(obj));   <span class="hljs-comment">// 输出结果: [[&#x27;id&#x27;, 1], [&#x27;name&#x27;, &#x27;hello&#x27;], [&#x27;age&#x27;, 18]</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-8"><a href="#注意：-8" class="headerlink" title="注意："></a>注意：</h4><p><code>Object.keys()</code>方法返回的数组中的值都是字符串，也就是说不是字符串的 key 值会转化为字符串。<br>结果数组中的属性值都是对象本身可枚举的属性，不包括继承来的属性。</p>
<h3 id="3-Object-getOwnPropertyNames"><a href="#3-Object-getOwnPropertyNames" class="headerlink" title="3. Object.getOwnPropertyNames()"></a>3. Object.getOwnPropertyNames()</h3><p><code>Object.getOwnPropertyNames()</code>方法与<code>Object.keys()</code>类似，也是接受一个对象作为参数，返回一个数组，包含了该对象自身的所有属性名。但它能返回 <span style='color:blue'>[不可枚举的属性]</span>。</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> a = [<span class="hljs-string">&#x27;Hello&#x27;</span>, <span class="hljs-string">&#x27;World&#x27;</span>];<br><br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(a) <span class="hljs-comment">// [&quot;0&quot;, &quot;1&quot;]</span><br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(a) <span class="hljs-comment">// [&quot;0&quot;, &quot;1&quot;, &quot;length&quot;]</span><br></code></pre></div></td></tr></table></figure>

<p>这两个方法都可以用来计算对象中属性的个数：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">var</span> obj = &#123; <span class="hljs-number">0</span>: <span class="hljs-string">&quot;a&quot;</span>, <span class="hljs-number">1</span>: <span class="hljs-string">&quot;b&quot;</span>, <span class="hljs-number">2</span>: <span class="hljs-string">&quot;c&quot;</span>&#125;;<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(obj) <span class="hljs-comment">// [&quot;0&quot;, &quot;1&quot;, &quot;2&quot;]</span><br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(obj).<span class="hljs-property">length</span> <span class="hljs-comment">// 3</span><br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertyNames</span>(obj).<span class="hljs-property">length</span> <span class="hljs-comment">// 3</span><br></code></pre></div></td></tr></table></figure>

<h3 id="4-Object-getOwnPropertySymbols"><a href="#4-Object-getOwnPropertySymbols" class="headerlink" title="4. Object.getOwnPropertySymbols()"></a>4. Object.getOwnPropertySymbols()</h3><p><code>Object.getOwnPropertySymbols()</code> 方法返回对象自身的 <code>Symbol</code> 属性组成的数组，不包括字符串属性：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> obj = &#123;<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>&#125;<br><br><span class="hljs-comment">// 给对象添加一个不可枚举的 Symbol 属性</span><br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">defineProperties</span>(obj, &#123;<br> [<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;baz&#x27;</span>)]: &#123;<br>  <span class="hljs-attr">value</span>: <span class="hljs-string">&#x27;Symbol baz&#x27;</span>,<br>  <span class="hljs-attr">enumerable</span>: <span class="hljs-literal">false</span><br> &#125;<br>&#125;)<br><br><span class="hljs-comment">// 给对象添加一个可枚举的 Symbol 属性</span><br>obj[<span class="hljs-title class_">Symbol</span>(<span class="hljs-string">&#x27;foo&#x27;</span>)] = <span class="hljs-string">&#x27;Symbol foo&#x27;</span><br><br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">getOwnPropertySymbols</span>(obj).<span class="hljs-title function_">forEach</span>(<span class="hljs-function">(<span class="hljs-params">key</span>) =&gt;</span> &#123;<br> <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(obj[key])<br>&#125;)<br><br><span class="hljs-comment">// 输出结果：Symbol baz Symbol foo</span><br></code></pre></div></td></tr></table></figure>

<h3 id="5-Reflect-ownKeys"><a href="#5-Reflect-ownKeys" class="headerlink" title="5. Reflect.ownKeys()"></a>5. Reflect.ownKeys()</h3><p><code>Reflect.ownKeys()</code> 返回一个数组，包含对象自身的所有属性。它和<code>Object.keys()</code>类似，<code>Object.keys()</code>返回属性<code>key</code>，但不包括不可枚举的属性，而<code>Reflect.ownKeys()</code>会返回所有属性<code>key</code>：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">var</span> obj = &#123;<br>	<span class="hljs-attr">a</span>: <span class="hljs-number">1</span>,<br>	<span class="hljs-attr">b</span>: <span class="hljs-number">2</span><br>&#125;<br><span class="hljs-title class_">Object</span>.<span class="hljs-title function_">defineProperty</span>(obj, <span class="hljs-string">&#x27;method&#x27;</span>, &#123;<br>	<span class="hljs-attr">value</span>: <span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;<br>	    <span class="hljs-title function_">alert</span>(<span class="hljs-string">&quot;Non enumerable property&quot;</span>)<br>	&#125;,<br>	<span class="hljs-attr">enumerable</span>: <span class="hljs-literal">false</span><br>&#125;)<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Object</span>.<span class="hljs-title function_">keys</span>(obj))<br><span class="hljs-comment">// [&quot;a&quot;, &quot;b&quot;]</span><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Reflect</span>.<span class="hljs-title function_">ownKeys</span>(obj))<br><span class="hljs-comment">// [&quot;a&quot;, &quot;b&quot;, &quot;method&quot;]</span><br></code></pre></div></td></tr></table></figure>

<h4 id="注意：-9"><a href="#注意：-9" class="headerlink" title="注意："></a>注意：</h4><ul>
<li><code>Object.keys()</code> ：相当于返回对象属性数组；</li>
<li><code>Reflect.ownKeys()</code> :相当于 <code>Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj)</code>。</li>
</ul>
<p>总结：</p>
<table>
<thead>
<tr>
<th><span style='color:#5cb85c'>对象方法</span></th>
<th align="center"><span style='color:#5cb85c'>遍历基本属性</span></th>
<th align="center"><span style='color:#5cb85c'>遍历原型链</span></th>
<th align="center"><span style='color:#5cb85c'>遍历不可枚举属性</span></th>
<th align="center"><span style='color:#5cb85c'>遍历 Symbol</span></th>
</tr>
</thead>
<tbody><tr>
<td>for in</td>
<td align="center">是</td>
<td align="center">是</td>
<td align="center">否</td>
<td align="center">否</td>
</tr>
<tr>
<td>Object.keys()</td>
<td align="center">是</td>
<td align="center">否</td>
<td align="center">否</td>
<td align="center">否</td>
</tr>
<tr>
<td>Object.getOwnPropertyNames()</td>
<td align="center">是</td>
<td align="center">否</td>
<td align="center">是</td>
<td align="center">否</td>
</tr>
<tr>
<td>Object.getOwnPropertySymbols()</td>
<td align="center">否</td>
<td align="center">否</td>
<td align="center">是</td>
<td align="center">是</td>
</tr>
<tr>
<td>Reflect.ownKeys()</td>
<td align="center">是</td>
<td align="center">否</td>
<td align="center">是</td>
<td align="center">是</td>
</tr>
</tbody></table>
<h2 id="三、其他遍历方法"><a href="#三、其他遍历方法" class="headerlink" title="三、其他遍历方法"></a>三、其他遍历方法</h2><h3 id="1-for"><a href="#1-for" class="headerlink" title="1. for"></a>1. for</h3><p>for 循环是应该是最常见的循环方式了，它由三个表达式组成，分别是声明循环变量、判断循环条件、更新循环变量。这三个表达式用分号分隔。可以使用临时变量将数组的长度缓存起来，避免重复获取数组长度，当数组较大时优化效果会比较明显。</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">const</span> arr = [<span class="hljs-number">1</span>,<span class="hljs-number">2</span>,<span class="hljs-number">3</span>,<span class="hljs-number">4</span>,<span class="hljs-number">5</span>]<br><span class="hljs-keyword">for</span>(<span class="hljs-keyword">let</span> i = <span class="hljs-number">0</span>, len = arr.<span class="hljs-property">length</span>; i &lt; len; i++ )&#123;<br>  <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(arr[i])<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p>在执行的时候，会先判断执行条件，再执行。<code>for</code> 循环可以用来遍历数组，字符串，类数组，<code>DOM</code> 节点等。可以改变原数组。</p>
<h3 id="2-while"><a href="#2-while" class="headerlink" title="2. while"></a>2. while</h3><p><code>while</code>循环中的结束条件可以是各种类型，但是最终都会转为布尔值，转换规则如下。</p>
<ul>
<li><code>Boolean</code>：true 为真，false 为假；</li>
<li><code>String</code>：空字符串为假，所有非空字符串为真；</li>
<li><code>Number</code>：0 为假，非 0 数字为真；</li>
<li><code>null</code>&#x2F;<code>Undefined</code>&#x2F;<code>NaN</code>：全为假；</li>
<li><code>Object</code>：全为真。</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> num = <span class="hljs-number">1</span>;<br><span class="hljs-keyword">while</span> (num &lt; <span class="hljs-number">10</span>)&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<br>    num ++;<br>&#125;<br></code></pre></div></td></tr></table></figure>

<p><code>while</code> 和 <code>for</code> 一样，都是先判断，再执行。只要指定条件为 <code>true</code>，循环就可以一直执行代码。</p>
<h3 id="3-do-x2F-while"><a href="#3-do-x2F-while" class="headerlink" title="3. do &#x2F; while"></a>3. do &#x2F; while</h3><p>该方法会先执行再判断，即使初始条件不成立，<code>do/while</code>循环也至少会执行一次。</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">let</span> num = <span class="hljs-number">10</span>;<br><br><span class="hljs-keyword">do</span><br>	&#123;<br>    <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num);<br>    num--;<br>  &#125;<br><span class="hljs-keyword">while</span>(num &gt;= <span class="hljs-number">0</span>);<br><br><span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(num); <span class="hljs-comment">//-1</span><br></code></pre></div></td></tr></table></figure>

<p>不建议使用 do &#x2F; while 来遍历数组。</p>
<h3 id="4-for-await-of"><a href="#4-for-await-of" class="headerlink" title="4. for await of"></a>4. for await of</h3><p><code>for await...of</code>方法被称为异步迭代器，该方法是主要用来遍历异步对象。它是 ES2018 中引入的方法。<br><code>for await...of</code> 语句会在异步或者同步可迭代对象上创建一个迭代循环，包括 <code>String</code>、<code>Array</code>类数组,<code>Map</code>、 <code>Set</code> 和自定义的异步或者同步可迭代对象。这个语句只能在 <code>async</code> <code>function</code> 内使用：</p>
<figure class="highlight javascript"><table><tr><td class="gutter hljs"><div class="hljs code-wrapper"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></div></td><td class="code"><div class="hljs code-wrapper"><pre><code class="hljs JavaScript"><span class="hljs-keyword">function</span> <span class="hljs-title function_">Gen</span> (time) &#123;<br>  <span class="hljs-keyword">return</span> <span class="hljs-keyword">new</span> <span class="hljs-title class_">Promise</span>(<span class="hljs-function">(<span class="hljs-params">resolve,reject</span>) =&gt;</span> &#123;<br>    <span class="hljs-built_in">setTimeout</span>(<span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) &#123;<br>       <span class="hljs-title function_">resolve</span>(time)<br>    &#125;,time)<br>  &#125;)<br>&#125;<br><br><span class="hljs-keyword">async</span> <span class="hljs-keyword">function</span> <span class="hljs-title function_">test</span> () &#123;<br>   <span class="hljs-keyword">let</span> arr = [<span class="hljs-title class_">Gen</span>(<span class="hljs-number">2000</span>),<span class="hljs-title class_">Gen</span>(<span class="hljs-number">100</span>),<span class="hljs-title class_">Gen</span>(<span class="hljs-number">3000</span>)]<br>   <span class="hljs-keyword">for</span> <span class="hljs-keyword">await</span> (<span class="hljs-keyword">let</span> item <span class="hljs-keyword">of</span> arr) &#123;<br>      <span class="hljs-variable language_">console</span>.<span class="hljs-title function_">log</span>(<span class="hljs-title class_">Date</span>.<span class="hljs-title function_">now</span>(),item)<br>   &#125;<br>&#125;<br><span class="hljs-title function_">test</span>()<br></code></pre></div></td></tr></table></figure>

            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                  <div class="post-meta mr-3">
                    <i class="iconfont icon-category"></i>
                    
                      <a class="hover-with-bg" href="/categories/JavaScript/">JavaScript</a>
                    
                  </div>
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/%E5%89%8D%E7%AB%AF/">#前端</a>
                    
                      <a class="hover-with-bg" href="/tags/JavaScript/">#JavaScript</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a target="_blank" href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2022/03/08/article-9/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">18个杀手级JavaScript单行代码</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2022/03/08/article-7/">
                        <span class="hidden-mobile">Vue项目优化打包——前端加分项</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
              <!-- Comments -->
              <article class="comments" id="comments" lazyload>
                
                  
                
                
  <div id="valine"></div>
  <script type="text/javascript">
    Fluid.utils.loadComments('#valine', function() {
      Fluid.utils.createScript('https://cdn.jsdelivr.net/npm/valine@1/dist/Valine.min.js', function() {
        var options = Object.assign(
          {"appId":"A6A3KekcB19LfYQfObiJlDAu-gzGzoHsz","appKey":"h5J0Jt6wCaR3HtH5I0brXmRk","path":"window.location.pathname","placeholder":null,"avatar":"retro","meta":["nick","mail","link"],"requiredFields":[],"pageSize":10,"lang":"zh-CN","highlight":false,"recordIP":false,"serverURLs":"","emojiCDN":null,"emojiMaps":null,"enableQQ":false},
          {
            el: "#valine",
            path: window.location.pathname
          }
        )
        new Valine(options);
        Fluid.utils.waitElementVisible('#valine .vcontent', () => {
          Fluid.plugins.initFancyBox('#valine .vcontent img:not(.vemoji)');
        })
      });
    });
  </script>
  <noscript>Please enable JavaScript to view the comments</noscript>


              </article>
            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <div style="display: flex;align-items: center;flex-wrap: wrap;flex-direction: row;justify-content: flex-start;"> <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" lazyload class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;"> </div>
    </div>
  </div>


    

    
      <a id="scroll-top-button" aria-label="TOP" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> <div style="font-size: 0.85rem"> <span id="timeDate">载入天数...</span> <span id="times">载入时分秒...</span> <script src="/js/duration.js"></script> </div> 
  </div>
  
  <div class="statistics">
    
    

    
      
        <!-- LeanCloud 统计PV -->
        <span id="leancloud-site-pv-container" style="display: none">
            总访问量 
            <span id="leancloud-site-pv"></span>
             次
          </span>
      
      
        <!-- LeanCloud 统计UV -->
        <span id="leancloud-site-uv-container" style="display: none">
            总访客数 
            <span id="leancloud-site-uv"></span>
             人
          </span>
      

    
  </div>


  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/img/police_beian.png" srcset="/img/loading.gif" lazyload alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>


  <!-- SCRIPTS -->
  
  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4/dist/js/bootstrap.min.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  <script  src="/js/local-search.js" ></script>



  
    <script  src="/js/img-lazyload.js" ></script>
  



  



  
    <script  src="https://cdn.jsdelivr.net/npm/tocbot@4/dist/tocbot.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3/dist/jquery.fancybox.min.js" ></script>
  
  
    <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4/anchor.min.js" ></script>
  
  
    <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js" ></script>
  




  <script defer src="/js/leancloud.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
        typing(title);
      
    })(window, document);
  </script>












  
    <!-- Baidu Analytics -->
    <script defer>
      var _hmt = _hmt || [];
      (function () {
        var hm = document.createElement("script");
        hm.src = "https://hm.baidu.com/hm.js?b2ef8b4e438bfbfa9667837d1124fb6c";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
      })();
    </script>
  

  

  

  

  

  





<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>


</body>
</html>
